<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">物联网平台解决方案</span>
        <span class="banner-main__subtitle" style="line-height: 28px">
          IoT 是一款物联网云操作系统，为万物互联提供可靠安全稳定的终端接入、协议适配、<br />
          消息路由、数据存储和分析、应用使能等核心功能。
        </span>
        <div class="size-box__column"></div>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案描述</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            IOT 是一个性能稳定、扩展灵活且轻量化的系统，能够针对不同的业务形态，将设备和业务的解耦，进而实现各种复杂的场景和业务流程。<br />
          </span>
          <div align="center"><img src="@/assets/iot.jpg" width="100%" /></div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案架构</h1>
        <h6 class="model-desc">Scheme Architecture</h6>
        <div class="card">
          <span class="description">
          </span>
          <div class="size-box__column"></div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="功能架构" name="first">
              <div align="center"><img src="@/assets/iot2.png" width="100%" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="设备接入" name="second">
              <div align="center"><img src="@/assets/iot3.png" width="100%" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="技术架构" name="third">
              <div align="center"><img src="@/assets/iot4.png" width="100%" /></div><br />
            </el-tab-pane>
          </el-tabs>  
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">应用场景</h1>
        <h6 class="model-desc">Application scenarios</h6>
        <div class="card">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="智慧电梯" name="first">
              <div align="center"><img src="@/assets/iotyy1.jpg" width="100%" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="无人售货机" name="second">
              <div align="center"><img src="@/assets/iotyy2.jpg" width="100%" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="智慧抄表" name="third">
              <div align="center"><img src="@/assets/iotyy3.jpg" width="100%" /></div><br />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '高性能：IoT 单集群可支持百万级设备连接和十万级QPS请求，具有毫秒级延迟，可支撑超大规模物联网设备接入需求。' },
          { icon: require('@/assets/icon_02.png'), title: '电信级高可靠：IoT 采用大规模分布式、高可用、高可靠集群，并提供多重安全机制。' }
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '多协议支持：IoT 支持主流物联网协议，包括MQTT、CoAP、LwM2M和HTTP等，并配套若干款边缘硬件网关实现PLC、OPC等接入。同时，IoT OS还提供边缘侧开发框架，支持更多私有协议的快速接入。' },
          { icon: require('@/assets/icon_04.png'), title: '网络透明：IoT 支持各种蜂窝网络(2G、3G、4G/NB-IoT) 、有线网络和无线网络，亦能支持5G中的mMTC（海量物联）和uRLLC（高可靠低时延）两大场景。' }
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '数据持久化和实时分析：IoT 内置高性能分布式时序数据库，支持海量数据的持久化和实时分析，也支持与用户提供的数据库、大数据平台或消息列对接，方便用户对数据进行存储与消费。' },
          { icon: require('@/assets/icon_06.png'), title: '规则引擎：IoT 提供基于SQL的高速规则引擎，支持用户设置复杂规则实时过滤海量数据，减少应用侧压力，使客户聚焦业务开发。' }
        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '可伸缩：基于良好的架构设计，IoT 具备强大的可伸缩能力。根据业务压力，既能以数百台规模的超大集群形式运行，也可以在超小配置上运行，并支持以公有云、私有云、物理机及Docker容器和K8S等方式进行灵活部署，因此能非常好地适应端-边-云体系。' },
        ]
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/iot1.png') no-repeat center 100%;
  background-size: 100% 400px;
  // background-position: 0 0;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
